<template>
  <div class="sun">
    <h4>孙子组件inject的值:{{ car }}</h4>
    <el-button @click="updateCarSon">改变爷爷组件的值</el-button>
    <!-- <el-button @click="tryToChangeCar">试试改变car</el-button> -->
  </div>
</template>

<script setup lang="ts">
import { inject } from "vue";
import { TOKEN } from "../common/key";
type CarObj = {
  car: string;
  upateCar: Function;
};
const { car, upateCar } = inject(
  TOKEN,
  /*默认值*/ {
    car: "1",
    upateCar: () => {
      return undefined;
    }
  }
) as CarObj;

const updateCarSon = (): void => {
  upateCar();
};

// const tryToChangeCar = (): void => {
//   car = "111";
// };
</script>

<style scoped lang="scss">
.sun {
  height: 100px;
  width: 400px;
  background: rgb(227, 115, 60);
}
</style>
